<template>
  <div class="technology" >
    <div class="hot-header">
      <h5>锤子科技动态</h5>
    </div>
    <ul class="activity-box">
      <li v-for="url in imgUrls">
        <img :src="url.url" alt="What? No images... ">
      </li>
  </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .technology
    margin-top: 30px
    border: 1px solid rgba(0,0,0,.1)
    border-radius: 8px
    overflow: hidden
    background-color: white
    .hot-header
      background-color: #fafafa
      line-height 60px
      font-size: 18px
      position: relative
      padding-left: 30px
    .activity-box
      border: 1px solid rgba(0,0,0,.14)
      height: 200px
      overflow: hidden
      cursor: pointer
      box-sizing border-box
      li
        box-sizing border-box
        width: 25%
        height: 200px
        float: left
        position: relative
        border-right: 1px solid rgba(0,0,0,.14)
        z-index: 200
        &:last-child
          border-right: 0
        img
          width: 100%
          height: 100%
</style>
<script>
  export default {
    data () {
      return {
        imgUrls: [
          {'url': 'static/imgs/technology/pic1.jpg'},
          {'url': 'static/imgs/technology/pic2.jpg'},
          {'url': 'static/imgs/technology/pic3.jpg'},
          {'url': 'static/imgs/technology/pic4.jpg'}
        ]
      }
    },
    components: {

    }
  }
</script>
